<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <el-button type="text" @click="openDialog">打开表格页面</el-button>
        <!-- before-close是右上方X按钮点击时钩子 -->
        <!-- center为true可以让标题居中显示 -->
        <el-dialog title="表格弹框页面" :visible.sync="dialogVisible" width="50%" :before-close="handleClose"
            :center="true">
            <!-- append-to-body为true可以在弹框内部加上一个弹框 -->
            <el-dialog title="表单弹框页面"  :append-to-body='true' :visible.sync="innerVisible" :center="true" >
                <!-- label-width决定label的宽度，默认为行宽。 -->
                <el-form :model="editForm" ref="editForm" label-width="80px"  :rules="rules">
                    <el-form-item label="日期：" prop="date">
                        <!-- el-date-pick为日期选择框 -->
                        <el-date-picker
                              v-model="editForm.date"
                              type="datetime"
                              placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="姓名：" prop="name">
                        <el-input v-model="editForm.name" ></el-input>
                    </el-form-item>
                    <el-form-item label="地址:" prop="address">
                        <el-select  v-model="editForm.address">
                            <el-option v-for="(item,index) in addresses" :key="index" :label="item" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <!-- 弹框底部按钮 -->
                <span slot="footer" class="dialog-footer">
                    <el-button @click="cancelAction">取消</el-button>
                    <el-button type="danger" v-if="editVisible" @click="editAction">修改</el-button>
                    <el-button type="danger" v-if="insertVisible" @click="insertAction">新增</el-button>
                </span>
            </el-dialog>
            <!-- :data可以table自动遍历数组数据 -->
            <el-table :data="tableData">
                <el-table-column property="date" label="日期" :formatter="formatDate"></el-table-column>
                <el-table-column property="name" label="姓名"></el-table-column>
                <el-table-column property="address" label="地址"></el-table-column>
                <el-table-column fixed="right" label="操作">
                    <!-- slot-scope="scope"+scope.row可以获取当前行的数据 -->
                    <template slot-scope="scope">
                        <el-button type="warning" size="small" @click="editData(scope.$index,scope.row)" plain>编辑</el-button>
                        <!-- 提示弹框信息 @confirm和@cancel分别为确认和取消的点击按钮事件 -->
                        <el-popconfirm
                            icon="el-icon-info"
                            icon-color="red"
                            title="这是一段内容确定删除吗？"
                            @confirm="deleteAction(scope.$index)"
                            @cancel="cancel(scope.$index)"
                            >
                            <el-button type="danger"  slot="reference" size="small" plain>删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>



            <!-- 弹框底部按钮 -->
            <span slot="footer" class="dialog-footer">
                <el-button type="danger" @click="showAdd">新增</el-button>
                <el-button @click="dialogVisible = false">返回</el-button>
            </span>
        </el-dialog>
    </div>
</body>

</html>

<script>
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                dialogVisible: false,
                innerVisible: false,
                editVisible:false,
                insertVisible:false,
                tableData: [
                    { date: new Date(), name: '汪笨湖', address: '上海市普陀区金沙江路 1518 弄' },
                    { date: new Date(), name: '汪笨湖', address: '上海市普陀区金沙江路 1518 弄' },
                    { date: new Date(), name: '汪笨湖', address: '上海市普陀区金沙江路 1518 弄' },
                    { date: new Date(), name: '汪笨湖', address: '上海市普陀区金沙江路 1518 弄' },
                    { date: new Date(), name: '汪笨湖', address: '上海市普陀区金沙江路 1518 弄' }
                ],
                editForm: {},
                editIndex:-1,
                deleteIndex:-1,
                inputFromWidth:300,
                rules:{
                    //date日期需要指定type,否则校验一致不通过
                    date:[{type:"date",required:true,message:'请输入日期',triggle:'change'}],
                    name:[{required:true,message:"请输入姓名",triggle:'blur'}],
                    address:[{required:true,message:'请选择地址',triggle:'change'}],
                  
                },
                addresses:["江苏省苏州市",'安徽省淮北市','上海市浦东区','河南省郑州市']
            }
        },
        methods: {
            //主页面-打开表格页面按钮钩子
            openDialog() {
                this.dialogVisible = true
            },
            //表格弹窗-右上方叉号钩子
            handleClose(done) {
                this.$confirm(`确认关闭弹框吗？`).then(_ => {
                    done();
                }).catch(_ => { });
            },
            //表格弹窗-编辑按钮钩子
            editData(index,row){
                this.innerVisible = true;
                this.editVisible = true;
                let editForm = {
                    date:row.date,
                    name:row.name,
                    address:row.address
                }
                this.editForm = editForm
                this.editIndex = index        
            },
            //表格弹窗-日期格式化钩子
            formatDate(row){
                let date = row.date;
                return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
            },
            //表格弹窗-删除弹框-确认按钮钩子
            deleteAction(index){
                this.tableData.splice(index,1);
                this.$message.success('删除成功!')
            },
            //表格弹窗-删除弹框-取消按钮钩子
            cancel(index){
                console.log(index)
            },
            //表格弹窗-新增按钮的钩子
            showAdd(){
                this.innerVisible = true;
                this.insertVisible = true;
            },
            //表单弹窗-新增按钮钩子
            insertAction(){
                this.$refs["editForm"].validate((valid) =>{
                    if(valid){
                        this.tableData.push(this.editForm)
                        this.cancelAction()
                        this.$message.success(`新增成功!`)
                    }else{
                        
                    }
                })
                
            },
            //表单弹窗-取消按钮钩子
            cancelAction(){
                this.insertVisible = false
                this.editVisible = false
                this.innerVisible = false
                this.editForm = {}
                this.editIndex = -1
            },
            //表单弹框-修改按钮钩子
            //splice(开始下标，删除个数，替换内容)
            editAction(){
                console.log(this.editForm)
                this.$refs["editForm"].validate((valid)=>{
                    if(valid){
                        let index = this.editIndex
                        this.tableData.splice(index,1,this.editForm)
                        this.cancelAction()
                        this.$message.success('修改成功!')
                    }
                })
               
            },
        },
    })
</script>